<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>石猴红木_产品详情</title>
    <link rel="stylesheet" href="${base}/layui/css/layui.css">
    <link rel="stylesheet" href="${base}/awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${base}/css/admin.css">
    <style>
    	.layui-bg-black{width: 200px;height: 136px;margin-right: 30px;float: left;text-align: center;font-size: 33px;color: #000000!important;padding-top: 30px;}
    	.hide {display: none;}
    	.checkbox{display: inline-block;}
    	.layui-form-item{font-size: 18px;}
    	.width100 {width: 100px; margin-right: 30px;float: left;}
    	.width180 {width: 180px; margin-right: 20px;float: left;}
    	.layui-input { display: inline-block; }
    	#productList{width: 100%;padding: 10px 2%;}
    	ul#productList li.one{width: 16%;float:left;}
    	.width180 {width: 180px; float: left;margin-top: 10px;}
    	.name{text-align: left;font-size: 14px;margin-top: 4px;overflow: visible;}
    	.left{float: left;width: calc(35% - 10px);padding-left: 5px;padding-top: 40px;padding-right: 5px;overflow: hidden;}
    	.right{float: left;width: 65%;text-align: center;}
    	#cart {position: absolute;right: 20px;top: 20px;}
    	#product { padding-left: 20px;padding-top: 20px;}
    	tr{height: 48px;}
    	td{text-align: left;margin-top: 10px;}
    	td.title{font-size: 14px;width: 80px;}
    	#bottom {position: fixed; background: black;width: 100%; height: 60px;padding-left: 40px;padding-top: 10px;bottom: 1px;z-index: 1000;}
    	ul#menu {float: left;color: #fff;font-size: 20px;margin-left: 10px; margin-top: 8px;}
    	ul#menu li {float: left;width: 168px;padding-left: 8px;}
    	ul#menu li span { font-size: 28px;}
    	ul#menu a { color: #fff; }
    </style>
</head>
<body class="layui-layout-body">
<div id="bottom" >
	<img src="${base}/images/shihou_logo.png"  height="60px" style="float: left;"/>	<ul id="menu"><li><a href="${base}/shihou/introduce"><span class="fa fa-info"></span> 公司介绍</a></li><li><a href="${base}/shihou/index"><span class="fa fa-shopping-bag"></span> 产品展示</a></li><li><a href="${base}/shihou/shopping"><span class="fa fa-shopping-cart"></span> 购物车</a></li></ul>
</div>
<div class="layui-form hide" id="discuss" style="padding-top:20px;padding-right:20px;">
  <div class="layui-form-item layui-form-text" id="product">
    
  </div>
</div>	
	<div class="left">
		<img src="${one.pic_url}"  width="400" />
	</div>
	<button class="layui-btn layui-btn-normal" id="cart"> <span class="fa fa-shopping-cart"></span> 查看购物车</button></div>
	<div class="right">
		<p style="font-size: 18px; letter-spacing: 2px;margin-top: 40px;">Product Information</p>
		<p style="font-size: 18px; letter-spacing: 5px;">产品信息</p>
		<table style="margin-left: 20px;margin-top: 20px;margin-bottom: 60px;">
			<tr>
				<td class="title">产品名称</td>
				<td>${one.name?default('')}</td>
			</tr>
			<tr>
				<td class="title">尺寸</td>
				<td>${one.size?default('')}</td>
			</tr>
			<tr>
				<td class="title">材质</td>
				<td>${one.quality?default('')}</td>
			</tr>
			<tr>
				<td class="title">价格</td>
				<td>${one.price?default('')}</td>
			</tr>
		</table>
		<!-- <a class="layui-btn layui-btn-normal" href="${base}/shihou/index" > <span class="fa fa-list"></span> 首页</a> -->
		<button class="layui-btn layui-btn-danger" id="buy"> <span class="fa fa-shopping-cart"></span> 加入购物车</button>
	</div>
</body>
<script src="${base}/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="${base}/layui/layui.all.js"></script>
<script>
$("#buy").click(function (){
	$.post("${base}/shihou/add_cart",
	   		{"id":${one.id}},function(data){ 
	   			layer.alert(data);
	   		}
	 );	
});
$("#cart").click(function (){
	$("#discuss").show();
	$.post("${base}/shihou/cart",
	   		{},function(data){
	   			$("#product").empty();
	   			var html = "";
	   			for(var i = 0 ; i< data.length;i++) {
	   				html += "<a href=\"${base}/shihou/detail?id=" + data[i]["id"]+"\" target=\"_blank\" >产品名称:"+ data[i]["name"] +"</a></br>";
	   			}
	   			$("#product").append(html);
	   		}
	 );	
	layer.open({
	    type: 1 ,
	    title: '购物车', 
	    area: ['600px', '400px'],   //宽高
	    shade: 0.4,   //遮罩透明度
	    content: $("#discuss"),
	    scrollbar: true,
	    cancel: function(){
			$("#discuss").hide();        
	    }
	});
});
</script>
</html>